<div class="layui-container fly-marginTop fly-user-main">
  {include file='common/Usermenu'/}

  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>

  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>


  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <ul class="layui-tab-title" id="LAY_mine">
        <li class="layui-this" lay-id="info">我的资料</li>
        <li lay-id="avatar">头像</li>
        <li lay-id="pass">密码</li>
        <li lay-id="cover">封面</li>
        <!-- <li lay-id="bind">帐号绑定</li> -->
      </ul>
      <div class="layui-tab-content" style="padding: 20px 0;">
        <!-- 个人资料 -->
        <div class="layui-form layui-form-pane layui-tab-item layui-show">
          <form method="post">
            <!-- 隐藏域 -->
            <input type="hidden" name="action" value="profile">
            <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                <input type="text" id="L_email" name="email" disabled autocomplete="off"
                  value="{$LoginUser['email']}" class="layui-input">
              </div>
              {if condition="$Think.cookie.LoginUser['auth'] == 0"}
              <div class="layui-form-mid layui-word-aux">如果您在邮箱已激活的情况下，变更了邮箱，需
                <a id="auth" style="font-size: 12px; color: #4f99cf;cursor: pointer;">重新验证邮箱</a>。
              </div>
              {/if}
            </div>
            <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">昵称</label>
              <div class="layui-input-inline">
                <input type="text" id="L_username" name="nickname" required lay-verify="required" autocomplete="off"
                  value="{$Think.cookie.LoginUser['nickname']}" class="layui-input">
              </div>
              <div class="layui-inline">
                <div class="layui-input-inline" style="width: 250px;">
                  <input type="radio" name="sex" value="0" {$LoginUser['sex']==0 ? 'checked' : '' } title="保密">
                  <input type="radio" name="sex" value="1" {$LoginUser['sex']==1 ? 'checked' : '' } title="男">
                  <input type="radio" name="sex" value="2" {$LoginUser['sex']==2 ? 'checked' : '' } title="女">
                </div>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">省份</label>
              <div class="layui-input-inline" style="width: 185px;">
                <select name="province" id="province" lay-filter="province" lay-verify="required">
                  <option value="">请选择</option>
                  {foreach $province as $item}
                  <option value="{$item.code}" {$item.code==$LoginUser['province'] ? 'selected' :''}>{$item.name}
                  </option>
                  {/foreach}
                </select>
              </div>

              <label class="layui-form-label">市</label>
              <div class="layui-input-inline" style="width: 185px;">
                <select name="city" id="city" lay-filter="city" lay-verify="required">
                  <option value="">请选择</option>
                  {foreach $city as $item}
                  <option value="{$item.code}" {$item.code==$LoginUser['city'] ? 'selected' :''}>{$item.name}</option>
                  {/foreach}
                </select>
              </div>

              <label class="layui-form-label">县 / 区</label>
              <div class="layui-input-inline" style="width: 185px;">
                <select name="district" id="district" lay-filter="district" lay-verify="required">
                  <option value="">请选择</option>
                  {foreach $district as $item}
                  <option value="{$item.code}" {$item.code==$LoginUser['district'] ? 'selected' :''}>{$item.name}
                  </option>
                  {/foreach}
                </select>
              </div>

            </div>
            <div class="layui-form-item layui-form-text">
              <label for="L_sign" class="layui-form-label">签名</label>
              <div class="layui-input-block">
                <textarea placeholder="随便写些什么刷下存在感" id="L_sign" name="content" autocomplete="off" class="layui-textarea"
                  style="height: 80px;">{$LoginUser['content']}</textarea>
              </div>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn" key="set-mine" lay-submit>确认修改</button>
            </div>
          </form>
        </div>

        <div class="layui-form layui-form-pane layui-tab-item">
          <div class="layui-form-item">
            <form method="post" enctype="multipart/form-data">
              <input type="hidden" name="action" value="avatar">
              <div class="avatar-add">
                <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                <button type="button" class="layui-btn upload-img" onclick="avatar.click()">
                  <i class="layui-icon">&#xe67c;</i>上传头像
                </button>
                <input type="file" name="avatar" id="avatar" hidden>
                <img src="{$LoginUser['avatar'] ? $LoginUser['avatar'] : '/static/home/res/images/upload.png' }"
                  id="img">
                <span class="loading"></span>
              </div>
              <div class="layui-form-item" style="margin-top: 20px;">
                <button class="layui-btn" key="set-mine" lay-submit>确认上传</button>
              </div>
            </form>
          </div>
        </div>

        <!-- 修改密码 -->
        <div class="layui-form layui-form-pane layui-tab-item">
          <form method="post">
            <input type="hidden" name="action" value="password">
            <div class="layui-form-item">
              <label for="L_nowpass" class="layui-form-label">当前密码</label>
              <div class="layui-input-inline">
                <input type="password" id="L_nowpass" name="nowpass" required lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label for="L_pass" class="layui-form-label">新密码</label>
              <div class="layui-input-inline">
                <input type="password" id="L_pass" name="pass" required lay-verify="required|password"
                  autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">6到16个字符</div>
            </div>
            <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">确认密码</label>
              <div class="layui-input-inline">
                <input type="password" id="L_repass" name="repass" required lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn" key="set-mine" lay-submit>确认修改</button>
            </div>
          </form>
        </div>

        <!-- 封面 -->
        <div style="width:41%;" class="layui-form layui-form-pane layui-tab-item">
          <form method="post" enctype="multipart/form-data">
            <!-- 隐藏域 -->
            <input type="hidden" name="action" value="cover" />

            <!-- 封面 -->
            <div class="layui-form-item">
              <div class="avatar-add">
                <p>
                  建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB
                </p>

                <button onclick="cover.click()" type="button" class="layui-btn upload-img">
                  <i class="layui-icon">&#xe67c;</i>上传封面
                </button>

                <input type="file" name="cover" id="cover" hidden />

                <img src="{$LoginUser['cover'] ? $LoginUser['cover'] : '/static/home/res/images/upload.png' }">
              </div>
            </div>

            <!-- 按钮 -->
            <div class="layui-form-item" style="text-align: center;">
              <button class="layui-btn" type="submit">确认修改</button>
            </div>
          </form>
        </div>
      </div>
      <!-- <div class="layui-form layui-form-pane layui-tab-item">
          <ul class="app-bind">
            <li class="fly-msg app-havebind">
              <i class="iconfont icon-qq"></i>
              <span>已成功绑定，您可以使用QQ帐号直接登录Fly社区，当然，您也可以</span>
              <a href="javascript:;" class="acc-unbind" type="qq_id">解除绑定</a>

              <a href="" onclick="layer.msg('正在绑定微博QQ', {icon:16, shade: 0.1, time:0})" class="acc-bind" type="qq_id">立即绑定</a>
                <span>，即可使用QQ帐号登录Fly社区</span>
            </li>
            <li class="fly-msg">
              <i class="iconfont icon-weibo"></i>
               <span>已成功绑定，您可以使用微博直接登录Fly社区，当然，您也可以</span>
                <a href="javascript:;" class="acc-unbind" type="weibo_id">解除绑定</a>

              <a href="" class="acc-weibo" type="weibo_id"
                onclick="layer.msg('正在绑定微博', {icon:16, shade: 0.1, time:0})">立即绑定</a>
              <span>，即可使用微博帐号登录Fly社区</span>
            </li>
          </ul>
        </div> -->
    </div>

  </div>
</div>
</div>
</div>
<script>
  // 预览图片
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }

  // 引用layui里面的模块
  layui.use(['layer', 'form'], function () {
    var form = layui.form,
      layer = layui.layer,
      $ = layui.jquery;

    // 省份选择
    form.on('select(province)', function (data) {
      var code = data.value;
      // 异步请求
      $.ajax({
        type: 'post',
        url: `{:url('home/user/area')}`,
        data: {
          code: code
        },
        dataType: 'json',
        success: function (result) {
          // console.log(result);
          var option = ''
          $('#city').html('');
          if (result.code == 1) {
            for (var item of result.data) {
              option += `<option value="${item.code}">${item.name}</option>`
            }

            $('#city').html(option);

          } else {
            option = `<option>请选择</option>`;
            $('#city').html(option);
            // form.render('select');
          }
          form.render('select');
        }
      })
    });


    // 选择市，把相应的县 / 区查询出来
    form.on('select(city)', function (data) {
      var code = data.value;

      // 异步请求
      $.ajax({
        type: 'post',
        url: `{:url('home/user/area')}`,
        data: {
          code: code
        },
        dataType: 'json',
        success: function (result) {
          // console.log(result);
          var option = ''
          $('#district').html('');
          if (result.code == 1) {
            for (var item of result.data) {
              option += `<option value="${item.code}">${item.name}</option>`
            }
            $('#district').html(option);
          } else {
            option = `<option>请选择</option>`;
            $('#city').html(option);
          }
          // 把数据重新更新到下拉框
          form.render('select');
        }
      })
    })

    // 邮箱验证
    $('#auth').click(function () {
      var email = $('#L_email').val();

      // 异步请求
      $.ajax({
        type: 'post',
        url: `{:url('home/user/email')}`,
        data: {
          email: email
        },
        dataType: 'json',
        success: function (result) {
          // console.log(result);
          if (result.code == 1) {
            // layui提供提示框
            layer.msg(result.msg, { icon: 6 });
          } else {
            layer.msg(result.msg, { icon: 5 });
          }
        }
      })
    })

    // 预览图
    $('#avatar').change(function () {
      var url = getObjectURL(this.files[0]);
      if (url) {
        $('#img').attr('src', url);
      }
    });

  });


</script>